<template>
  <div class="layout-container">
    <div class="layout-container-form flex space-between">
      <div class="layout-container-form-handle"></div>
      <div class="layout-container-form-search">
        <el-button type="primary" class="search-btn" @click="handleSave(saveData)">保存</el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <el-table ref="table" v-loading="loading" border height="99%" :data="tableData" @getTableData="getTableData"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column show-overflow-tooltip prop="description" label="接口介绍" align="left" width="200"/>
        <el-table-column show-overflow-tooltip prop="path" label="接口地址" align="left" width="200">
        </el-table-column>
        <el-table-column prop="type" label="请求类型" align="left">
          <template #default="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column prop="path" label="接口状态" align="left">
          <template #default="scope">
            <el-tag effect="dark" :type="scope.row.status ? 'success' : 'danger'">
              {{ scope.row.status ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, inject, watch, nextTick} from "vue";
import {Page} from "@/components/table/type";
import {
  getData,
  saveResourceByRoleId,
  resourceIdsByRoleId,
} from "@/api/system/resource";
import {ElMessage} from "element-plus";
// 存储搜索用的数据
const query = reactive({
  input: "",
});
// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 20,
  total: 0,
});
const activeCategory: any = inject("activeResource");
const activeRoleId: any = inject("activeRoleId");
const loading = ref(true);
const tableData = ref([]);
const table = ref();
const saveData = ref([]);

const handleSelectionChange = (val: []) => {
  saveData.value = val;
};

// 初始化当前用户的接口选中状态
function initSelection() {
  let roleId = activeRoleId.value;
  resourceIdsByRoleId(roleId).then(({data}) => {
    let ids: any = data;
    tableData.value.forEach((element: any) => {
      ids.forEach((id: any) => {
        if (id == element.resourceId) {
          table.value.toggleRowSelection(element, true);
        }
      });
    });
  });
}

// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: boolean) => {
  loading.value = true;
  let params = {
    category: activeCategory.value,
  };
  getData(params.category.service, params.category.controller)
      .then((res) => {
        tableData.value = res.data;
        initSelection();
      })
      .catch((error) => {
        tableData.value = [];
        page.index = 1;
        page.total = 0;
      })
      .finally(() => {
        loading.value = false;
      });
};

// 保存
const handleSave = (data: object[]) => {
  let params = {
    resourceIds: data.map((e: any) => {
      return e.resourceId;
    }),
    controller: activeCategory.value.controller,
  };
  let roleId = activeRoleId.value;
  saveResourceByRoleId(
      roleId,
      params.resourceIds
  ).then((res) => {
    ElMessage({
      type: "success",
      message: "保存成功",
    });
  });
};

watch(activeCategory, (newVal) => {
  getTableData(false);
});
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100%;
  margin: 0;
  width: calc(100%);
}

.layout-container-table {
  padding: 15px 0 0 0;
}

.layout-container-form {
  padding: 0;
}
</style>